<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>邮箱验证码验证</title>
    <script>
        function validateEmail(email) {
            const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            return re.test(email);
        }

        function startCooldown(button) {
            let cooldown = 60;
            button.disabled = true;
            const interval = setInterval(() => {
                if (cooldown === 0) {
                    clearInterval(interval);
                    button.disabled = false;
                    button.innerText = "发送验证码";
                } else {
                    button.innerText = `请稍等 ${cooldown} 秒`;
                    cooldown--;
                }
            }, 1000);
        }

        function sendCode() {
            const emailInput = document.getElementById("email");
            const email = emailInput.value;
            if (!validateEmail(email)) {
                alert("请输入有效的邮箱地址！");
                return;
            }

            const sendButton = document.getElementById("sendButton");
            startCooldown(sendButton);

            fetch('SendCodeServlet', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: `email=${email}`
            }).then(response => response.text()).then(data => {
                alert(data);
            });
        }

        function verifyCode() {
            const codeInput = document.getElementById("code");
            const code = codeInput.value;

            fetch('VerifyCodeServlet', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: `code=${code}`
            }).then(response => response.text()).then(data => {
                alert(data);
            });
        }
    </script>
</head>
<body>
<h2>邮箱验证码验证</h2>
<form id="verificationForm" onsubmit="return false;">
    <label for="email">邮箱地址:</label>
    <input type="email" id="email" name="email" required>
    <button type="button" id="sendButton" onclick="sendCode()">发送验证码</button>
    <br><br>
    <label for="code">验证码:</label>
    <input type="text" id="code" name="code" required>
    <button type="button" onclick="verifyCode()">验证</button>
</form>
</body>
</html>
